<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->

    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">
      <a-row :gutter="[12,12]">
        <a-col :span="12">
          <a-form-item label="设备名称" field="channelName">
            <a-input v-model="formState.channelName" placeholder="请填写设备名称"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="摄像头位置" field="cameraDirection">
<!--            <a-input v-model="formState.cameraDirection" placeholder="请填osd名称"/>-->
            <smart-dict v-model="formState.cameraDirection" placeholder="请填写摄像头位置" :url="ProductOptions.CameraDirection"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="摄像头编号" field="videoLocation">
            <a-input v-model="formState.videoLocation" placeholder="请填写摄像头编号"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-card title="视频预览">
        <div id="playerDom"  ></div>
      </a-card>

    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>


import {Notification} from "@arco-design/web-vue";
import {ref} from "vue";
import  EZUIKit from 'ezuikit-js';
import {EditDrawer} from '@/libs/core'
import {DETAIL_EDIT} from "../../resource/form";
import {ProductHttp} from '../../resource/http'
import {ProductOptions} from "@/libs/options";

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {BODY, RULES} = DETAIL_EDIT

const {updateCameraDetail} = ProductHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}
const service = new EditDrawer(config).setUpdateRequest(updateCameraDetail)
const {formRef, formState, LAYER, onCancel, onSubmit} = service
LAYER.title = '修改猪圈'

const show=ref(false)
let player=null

const onLoadUlr = async () => {
  show.value=true
  const x = {'id': props.record.id}
  const {data} = await ProductHttp.getCameraDetailAddress(x)
  const pa = JSON.parse(data);
  console.log("请求的结果：", pa.url)
  console.log(formRef.value)
  // player =new Aliplayer({
  //   id: 'playerDom' ,
  //   source: data,
  //   isLive: true,
  // });



  player = new EZUIKit.EZUIKitPlayer({
    id: 'playerDom', // 视频容器ID
    accessToken: pa.accessToken,
    url: pa.url,
    template: 'simple',
    handleError: ()=>{
      console.log("打开失败")
      Notification.error({
        title: '打开失败',
        content: '设备拉去失败!',
      })
    }
  })



}

const onClose=async ()=>{
  await player.stop()
  service.onCancel('NONE')
}

onLoadUlr()


</script>
